import { ComUtils } from "@/utils/Com"
import { Accessor } from "solid-js"

interface Props {
    show: Accessor<boolean>
    children: any
    title: string
    ok?: () => void
    close?: () => void
}

export default function Popup(props: Props) {

    return <div class="flex items-center justify-center fixed left-0 top-0 w-full h-full z-50 bg-[rgba(0,0,0,0.4)]" style={{ 'display': props.show() ? 'flex' : 'none' }}>
        <div class="px-4 pt-4 bg-[#181818] border border-[#39394e] rounded-lg max-w-[90%] w-[25rem] max-h-[75vh] overflow-auto">
            <h3 class="mb-6 text-xl font-bold">
                {props.title}
            </h3>
            {props.children}
            <div class="flex items-center justify-end gap-8 mt-6 py-4 sticky bottom-0 bg-[#181818]">
                <button class="btn" onclick={props.close}>
                    {ComUtils.tr('cancel')}
                </button>
                <button class="btn" onclick={props.ok}>
                    {ComUtils.tr('popup_ok')}
                </button>
            </div>
        </div>
    </div>
}